<template>
  <view class="container"
    style="background-position: right 30% center; background-image: url('/static/back.png');background-size: cover;background-repeat: no-repeat;">
    <!-- <view class="left-bottom-sign"></view> -->
    <view class="back-btn yticon icon-zuojiantou-up" @click="navBack"></view>
    <!-- <view class="right-top-sign"></view> -->
    <!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
    <view class="wrapper">

      <view class="left-top-sign">
        <image src="../../static/logo.png" mode=""></image>
      </view>
      <view class="welcome">
        主权账户
      </view>
      <view class="input-content">
        <view class="input-item">
          <!-- <text class="tit">手机号码</text> -->
          <image src="../../static/phone.png" mode=""></image>
          <input type="text" :value="userName" placeholder="请输入账号" maxlength="11" data-key="userName"
            @input="inputChange" style="color: white;" />
        </view>
        <view class="input-item">
          <!-- <text class="tit">密码</text> -->
          <image src="../../static/Vector.png" mode=""></image>
          <input type="mobile" :value="password" placeholder="请输入密码" placeholder-class="input-empty" maxlength="20"
            password data-key="password" @input="inputChange" @confirm="toLogin" style="color: white;" />
        </view>
        <!-- <view class="input-item">
		  <text class="tit">密码</text>
		  <image src="../../static/Vector.png" mode=""></image>
		  <input
		      type="mobile"
		      :value="password"
		      placeholder="请输入验证码"
		      placeholder-class="input-empty"
		      maxlength="20"
		      password
		      data-key="password"
		      @input="inputChange"
		      @confirm="toLogin"
		      style="color: white;"
		  />
		  <text class="get-code-btn" @click="getCode">获取验证码</text>
		</view> -->
      </view>
      <view class="forget-section">
        <checkbox :checked="termsAgreed" @click="toggleTermsAgreed" background-color="black"
          active-background-color="#02a5f8" icon-color="white" border-color="white" style="transform: scale(0.7);">
        </checkbox>
        我已阅读并同意《服务协议》和《隐私政策》
      </view>
      <button class="confirm-btn" @click="toLogin" :disabled="logining">登录</button>
      <!-- <view class="forget-section">
          忘记密码?
      </view> -->
    </view>
    <view class="register-section">
      使用本机号码一键登录
      <!-- <text @click="toRegist">马上注册</text> -->
    </view>
  </view>
</template>

<script>
import { mapMutations, mapActions } from 'vuex';
import user, { loginRequest } from "@/api/user.js";
import {drUserCreate} from "@/api/right.js"
import { setToken } from "@/util/auth";
import env from '@/util/env';

export default {
  data() {
    return {
      userName: '123456',
      password: '123456',
      logining: false,
      termsAgreed: false,
    };
  },
  methods: {
    ...mapMutations(['login']),
    ...mapActions(['updateUserInfo', 'updateToken']), // 映射 updateUserInfo 到当前组件的 methods 中
    inputChange(e) {
      const key = e.currentTarget.dataset.key;
      this[key] = e.detail.value;
    },
    navBack() {
      uni.navigateBack();
    },
    navTo(url) {
      uni.navigateTo({
        url
      })
    },
    toRegist() {
      this.$api.msg('去注册');
    },
    async toLogin() {
      console.log("termsAgreed:", this.termsAgreed);
      if (!this.termsAgreed) {
        this.$api.msg('请先同意服务协议和隐私政策');
        return;
      }
      this.logining = true;
      const { userName, password } = this;
      /* 数据验证模块
      if(!this.$api.match({
          mobile,
          password
      })){
          this.logining = false;
          return;
      }
      */
      const parame = {
        password,
        "username":userName,
        "clientType": 0,
        "loginType": 0,
      };

      //const result = await this.$api.json('userInfo');
      // let result = await this.AccountPasswordLogin(parame);
      let result = await loginRequest(parame);
      if (result.code === 200) {
		//暂时注释
        let systemTokenResult = await this.drUserCreate({...parame,userName});//数权接口不经过统一封装，如此更改

		// //暂时注释
        if (systemTokenResult.code === 0) {
			uni.setStorageSync('systemToken', systemTokenResult.data.token);
        }
        this.updateUserInfo(result.user); // 更新用户信息到 Vuex
        this.updateToken(result.token); // 更新 token 到 Vuex
        uni.switchTab({
          url: '/pages/index/index'
        });
      } else {
        this.$api.msg(result.msg);
        this.logining = false;
      }
    },
    toggleTermsAgreed() {
      this.termsAgreed = !this.termsAgreed;
    },
    // 密码登录
    AccountPasswordLogin(parame) {
      return new Promise((resolve, reject) => {
        uni.request({
          url: `${this.$store.state.HTTP}/applet/public/login`,
          method: "POST",
          data: parame,
          success: (res) => {
            console.log('res', res)
            resolve(res.data);
          }, fail: (err) => {
            console.log('err', err)
            reject(err.data)
            this.$api.msg(err.data.msg);
          }
        });

      })
    },
	// 数权获取
	drUserCreate(parame) {
		 const { userName, password } = this;
		const url = `${env.rightUrl}/drUserCreate?userName=${userName}&password=${password}`;
	  return new Promise((resolve, reject) => {
	    uni.request({
	      url: url,
	      method: "POST",
		  header:{
			  'access-auth-token':uni.getStorageSync('systemToken'),
		  },
	      data: parame,
	      success: (res) => {
	        console.log('res', res)
	        resolve(res.data);
	      }, fail: (err) => {
	        console.log('err', err)
	        reject(err.data)
	        this.$api.msg(err.data.msg);
	      }
	    });

	  })
	},
  },
};
</script>


<style lang='scss'>
page {}

.container {
  padding-top: 115px;
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-position: right 30% center;
  background-image: url(/static/back.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.wrapper {
  position: relative;
  z-index: 90;

  padding-bottom: 40upx;
}

.back-btn {
  position: absolute;
  left: 40upx;
  z-index: 9999;
  padding-top: var(--status-bar-height);
  top: 40upx;
  font-size: 40upx;
  color: $font-color-dark;
}

.left-top-sign {
  font-size: 120rpx;
  color: #0a0a22;
  position: relative;
  left: 46rpx;
  top: -30px;

  image {
    width: 30px;
    height: 30px;
  }
}

.right-top-sign {
  position: absolute;
  top: 80upx;
  right: -30upx;
  z-index: 95;

  &:before,
  &:after {
    display: block;
    content: "";
    width: 400upx;
    height: 80upx;
    background: #b4f3e2;
  }

  &:before {
    transform: rotate(50deg);
    border-radius: 0 50px 0 0;
  }

  &:after {
    position: absolute;
    right: -198upx;
    top: 0;
    transform: rotate(-50deg);
    border-radius: 50px 0 0 0;
    /* background: pink; */
  }
}

.left-bottom-sign {
  position: absolute;
  left: -270upx;
  bottom: -320upx;
  border: 100upx solid #d0d1fd;
  border-radius: 50%;
  padding: 180upx;
}

.welcome {
  position: relative;
  left: 50upx;
  top: -90upx;
  font-size: 46upx;
  color: #fff;
  text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);
}

.get-code-btn {
  width: 240rpx;
  height: 60rpx;
  line-height: 60rpx;
  border: none;
  border-radius: 30rpx;
  background-color: transparent;
  color: #02a3f5;
  margin-left: 20rpx;
  border: none;
  font-size: 10px;
}

.input-content {
  padding: 0 60upx;
}

.input-item {
  display: flex;

  align-items: flex-start;
  justify-content: center;
  padding: 20upx;
  background: #454866;
  border-radius: 4px;
  margin-bottom: 50upx;

  &:last-child {
    margin-bottom: 0;
  }

  .tit {
    height: 50upx;
    line-height: 56upx;
    font-size: $font-sm+2upx;
    color: $font-color-base;
  }

  .phone {
    height: 60rpx;
    font-size: 30rpx;
    color: #fff;
    line-height: 60rpx;
    margin-right: 10px;
  }

  input {
    height: 60upx;
    font-size: 28rpx;
    color: $font-color-dark;
    width: 100%;
  }

  image {
    width: 20px;
    height: 20px;
    margin: 5px 10px;
  }
}

.confirm-btn {
  width: 630upx;
  height: 100upx;
  line-height: 100upx;
  border-radius: 50px;
  margin-top: 70upx;
  background: #444351;

  color: #fff;
  font-size: $font-lg;

  &:after {
    border-radius: 100px;
  }
}

.confirm-btn:active {
  background: linear-gradient(to right, #17d8c5, #05adf0);
}

.forget-section {
  font-size: $font-sm+2upx;
  color: #fff;
  text-align: center;
  margin-top: 40upx;
}

.register-section {
  position: absolute;
  left: 0;
  bottom: 50upx;
  width: 100%;
  font-size: $font-sm+2upx;
  color: $font-color-base;
  text-align: center;

  text {
    color: $font-color-spec;
    margin-left: 10upx;
  }
}
</style>
